<template>
  <div class="crumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">权限</a></el-breadcrumb-item>
      <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/modules/user"
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const useState = useUserStore()
const route = useRoute()
const name = ref('')
onMounted(() => useState.menus.forEach(item => {
  if (route.name == item.name) {
    name.value = item.title
  }
}))
</script>

<style lang="less" scoped>
.crumb {
  padding: 15px 20px;
  height: 30px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  position: fixed;
  z-index: 999;
  top: 70px;
  width: 100%;
}
</style>
